import React, { forwardRef, useState, useEffect } from 'react'
import './showinfo.scss'
import * as echarts from "echarts";
const Showinfo = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        setdata(ref)
    }
    const drawlist = () => {
        let { name } = ref;
        return <h1 className='title'>{'质检人：'+name}</h1>
    }
    const drawbar = () => {
        let { list } = ref;
        var a = null
        a= Object.values(list)
        console.log(a);
        var Mycharts = echarts.init(document.getElementById("bar"));
        var list1 = ['荔枝霉疫霉病', '荔枝炭疽病', '荔枝蝽蟓', '霜霉病', '软腐病'];
        var list2 = a;
        var myColor = ["#FFA483", "#F97F53", "#F45922", "#F45922", "#F45922"]
        let option = {
            backgroundColor: "#fff",
            grid: {
                left: "2%",
                right: "30%",
                bottom: "10%",
                top: "10%",
                containLabel: true,
            },
            xAxis: [
                {
                    show: false,
                },
                {
                    show: false,
                },
            ],
            yAxis: {
                type: "category",
                inverse: true,
                show: false,
            },
            series: [
                {
                    show: true,
                    type: "bar",
                    barGap: "-100%",
                    barWidth: "20%",
                    z: 2,
                    itemStyle: {
                            color: function (params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num];
                            },
                    },
                    label: {
                            show: true,
                                color: "#000",
                                fontSize: 25,
                                fontWeight: "bold",
                            position: "right",
                            formatter: function (data) {
                                return list2[data.dataIndex].toFixed(2) + "%";
                            },
                    },
                    data: list2,
                },
                {
                    show: true,
                    type: "bar",
                    xAxisIndex: 1, 
                    barGap: "-100%",
                    barWidth: "10%",
                    itemStyle: {
                            borderRadius: 200,
                            color: "transparent",
                    },
                    label: {
                            show: true,
                            position: [0, "-20"],
                                fontSize: 14,
                                color: "#333",
                            formatter: function (data) {
                                return list1[data.dataIndex];
                            },
                    },
                    data: list2,
                },
            ],
        }
        Mycharts.setOption(option)
        window.onresize = () => {
            Mycharts.resize();
        }
    }
    useEffect(() => {
        console.log(infodata);
        getdata()
        drawbar()
    }, [])
    return (
        <div className='show'>
            {drawlist()}
            <div id='bar'></div>
        </div>
    )
})
export default Showinfo